<template>
  <div class="singer-song">
      <div class="list">
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
              <div v-for="(item,index) in list" :key="index">
                  <h4>{{item.name}}</h4>
                  <div class="singer">
                      <span v-for="(singerItem,index) in item.singer" :key="index">
                          {{singerItem.name}}
                          <span v-show="index!=item.singer.length-1">/</span>
                      </span>
                      <span v-show="item.album">
                          <span>·</span>
                          <span>{{item.name}}</span>
                          <span v-show="item.subtitle != ''">
                              <span>·</span>
                              <span>{{ item.subtitle }}</span>
                          </span>
                      </span>
                  </div>
              </div>
          </van-list>
      </div>
  </div>
</template>
<script>
export default {
  props: ["singerId"],
  data(){
      return{
          list: [],
          loading: false,
          finished: false,
          page: 1,
      };
  },
  methods: {
      getData(){
          this.$request(
              'get',
              '/singer/songs?singermid=' + this.singerId + '&page=' + this.page + '&num=30'
          ).then((res) => {
              console.log(res)
              this.list = this.list.concat(res.data.list);
              this.loading = false;
              this.page++;
              if(res.data.list.length == 0){
                  this.finished = true;
              }
          });
      },
      onLoad(){
          setTimeout(() => {
              this.getData(this.page, 30);
              this.loading = true;
          }, 1000);
      },
  },
};
</script>
<style scoped>
.list {
  margin: 0 1rem;
}

.list h4 {
  text-align: left;
  font-size: 1rem;
}

.singer {
  text-align: left;
}

.singer span {
  font-size: 0.8rem;
  color: rgb(160, 160, 190);
}

.singer>span:nth-last-child(1)>span:nth-child(1) {
  margin: 0 0.5rem;
  font-weight: 900;
  color: red;
}
.singer>span:nth-last-child(1)>span:nth-last-child(1)>span:nth-child(1) {
  color: red;
}
.singer>span:nth-last-child(1)>span:nth-last-child(1){
  margin: 0 0.5rem;
  font-weight: 900;
}
</style>